<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>违纪处分</title>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/LogCss.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        #tb1 tr:hover td {
            background-color: #F3F3F3;
        }
        button:hover{
            cursor:pointer;
        }
        .btn{
            display: inline-block;
            height: 38px;
            line-height: 38px;
            padding: 0 18px;
            background-color: #009688;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            border: none;
            border-radius: 20px;
            cursor: pointer;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!-- header -->
    <div th:replace="~{commons/header::header}"></div>
    <!-- left -->
    <div th:replace="~{commons/left::left}"></div>
    <!-- 内容主体区域 -->
    <div class="layui-body" id="app">
        <!-- 全局遮罩 -->
        <div id="showLogInfo" v-if="showLogInfo">
            <div id="showLogInfo_table" style="margin-top: 1%;margin-left: 15%;height: 85%;">
                <div style="height: 35px;border-bottom: 1px solid #0C0C0C;">
                    <div><p style="margin-left: 10px;margin-top:7px;font-size: 17px;float: left"><strong>新增违纪处分记录</strong></p></div>
                </div>
                <div style="margin-top: 10px;">
                    <form action="/break_rule_add" method="post" style="margin: auto;width: 85%;" id="addForm">
                        <table style="margin: auto;font-size: 12px;">
                            <tr style="height: 60px">
                                <td style="width: 12%;">学号：</td>
                                <td><input onkeyup="value=value.replace(/[^\d]/g,'')" v-model="input[0]" placeholder="请输入内容" name="stu_id" class="input_td" type="tel" maxlength="10">
                                    <button type="button" @click="SelectStu(input[0])" style="margin-left: 5px;border: none;background-color: #ffffdd ;color: indianred;border-radius: 2px 2px 2px 2px;height:20px;font-size: 8px">校验</button>
                                 </td>
                                <td style="width: 12%;">姓名：</td><td><input  disabled="true" v-model="selectStu[0].stu_name" name="stu_name" class="input_td"></td>
                            </tr>
                            <tr style="height: 60px">
                                <td>性别：</td><td><input v-model="selectStu[0].stu_sex" disabled="true" name="stu_sex" class="input_td"></td>
                                <td>二级学院：</td><td><input v-model="selectStu[0].stu_college" disabled="true" name="stu_college" class="input_td"></td>
                            </tr>
                            <tr style="height: 60px">
                                <td>专业：</td><td><input v-model="selectStu[0].stu_major" disabled="true" name="stu_major" class="input_td"></td>
                                <td>违纪类型：</td>
                                <td>
                                    <select name="bre_type">
                                        <option value="考试作弊">考试作弊</option>
                                        <option value="违规电器">违规电器</option>
                                        <option value="宿舍违纪">宿舍违纪</option>
                                        <option value="打架斗殴">打架斗殴</option>
                                        <option value="教学管理违纪">教学管理违纪</option>
                                        <option value="其他">其他</option>
                                     </select>
                                </td>
                            </tr>
                            <tr style="height: 60px">
                                <td>处分等级：</td>
                                <td>
                                    <select name="bre_level">
                                        <option value="警告">警告</option>
                                        <option value="严重警告">严重警告</option>
                                        <option value="记过">记过</option>
                                        <option value="留校察看">留校察看</option>
                                        <option value="开除学籍">开除学籍</option>
                                    </select>
                                </td>
                                <td>处分文号：</td><td><input v-model="input[7]" placeholder="请输入内容" name="bre_type_name" class="input_td"></td>
                            </tr>
                            <tr style="height: 100px"><td>违纪事实：</td><td  colspan="3"><textarea v-model="input[8]" placeholder="请输入内容" name="bre_detail" class="input_td"  style="width: 90%;height: 80px; resize:none"></textarea></td></tr>
                            <tr style="height: 60px">
                                <td>处分时间：</td><td><input v-model="input[9]" type="date" name="bre_time" :max="date" v-on:input="onchange"></td>
                                <td>到期时间：</td><td><input v-model="bre_relieve_time"  type="date" name="bre_relieve_time" readonly="readonly" ></td>
                            </tr>
                            <tr style="display: none"><td><input v-model="userId" name="bre_operator"></td></tr>

                        </table>
                        <div style="text-align: center;">
                            <button type="button"  style="margin-left: -10px;margin-top:5px;height:35px;width: 100px;border: none;background-color:#169BD5;color: white;border-radius: 4px 4px 4px 4px;font-size: 8px;" @click="submit()">增加</button>
                            <button @click="CloseShow()" style="margin-left: 10px;margin-top:5px;height:35px;width: 100px;border: none;color: black;border-radius: 4px 4px 4px 4px;font-size: 8px;">关闭</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>


        <div v-if="BreakInfo" id="userInfo">
            <div style="background-color: white;width: 50%;height: 80%;margin-top: 2%;margin-left: 15%;">
                <div style="height: 35px;border-bottom: 1px solid #0C0C0C;">
                    <div><p style="margin-left: 10px;margin-top:7px;font-size: 17px;float: left"><strong>违纪处分详情</strong></p></div>
                </div>
                    <table style="margin: auto;font-size: 12px;text-align: center">
                        <tr style="height: 60px">
                            <td style="width: 12%;">姓名：</td><td><input :value="BreakInfoArr.stu_name" class="input_td"  readonly="readonly"></td>
                            <td style="width: 12%;">性别：</td><td><input :value="BreakInfoArr.stu_sex" class="input_td"  readonly="readonly"></td>
                        </tr>
                        <tr style="height: 60px">
                            <td>学号：</td><td><input :value="BreakInfoArr.stu_id"  class="input_td"  readonly="readonly"></td>
                            <td>专业：</td><td><input :value="BreakInfoArr.stu_major" class="input_td"  readonly="readonly"></td>
                        </tr>
                        <tr style="height: 60px">
                            <td>二级学院：</td><td><input :value="BreakInfoArr.stu_college" class="input_td"  readonly="readonly"></td>
                            <td>违纪类型：</td><td><input :value="BreakInfoArr.bre_type" class="input_td"  readonly="readonly"></td>
                        </tr>
                        <tr style="height: 60px">
                            <td>处分等级：</td><td><input :value="BreakInfoArr.bre_level" class="input_td"  readonly="readonly"></td>
                            <td>处分文号：</td><td><input :value="BreakInfoArr.bre_type_name"  class="input_td"  readonly="readonly"> </td>
                        </tr>
                        <tr style="height: 60px">
                            <td>处分时间：</td><td><input :value="BreakInfoArr.bre_time" class="input_td"  readonly="readonly"></td>
                            <td>处分到期时间：</td><td><input :value="BreakInfoArr.bre_relieve_time"  class="input_td"  readonly="readonly"></td>
                        </tr>
                        <tr style="height: 60px"><td>辅导员：</td><td colspan="3"><input :value="BreakInfoArr.stu_instructor"  class="input_td"  readonly="readonly"></td></tr>
                        <tr style="height: 60px"><td>违纪事实：</td><td colspan="3"><input :value="BreakInfoArr.bre_detail"  class="input_td"  readonly="readonly"></td></tr>
                        <input v-bind:value="BreakInfoArr.bre_id" name="bre_id" style="display: none">
                    </table>
                <div  style="text-align: center;margin-top:20px;">
                    <button @click="CloseInfoShow()" style="margin-left: 10px;margin-top:5px;height:35px;width: 100px;border: none;color: black;border-radius: 4px 4px 4px 4px;font-size: 8px;">关闭</button>
                </div>
            </div>
        </div>

        <div v-if="showUpData" style="position :fixed;width: 100%;height: 100%;z-index: 999;background-color: rgba(0,0,0,0.5);">
            <div style="background-color: white;width: 50%;height: 75%;margin-top: 2%;margin-left: 15%;">
                <div style="height: 35px;border-bottom: 1px solid #0C0C0C;">
                    <div><p style="margin-left: 10px;margin-top:7px;font-size: 17px;float: left"><strong>修改记录</strong></p></div>
                </div>
                <form action="/breakRule_update" method="post" id="breakRule_update">
                    <table style="margin: auto;font-size: 12px;">
                        <tr style="height: 60px">
                            <td style="width: 12%;">姓名：</td><td><input :value="BreakUpArr.stu_name" class="input_td" disabled="true"></td>
                            <td style="width: 12%;">性别：</td><td><input :value="BreakUpArr.stu_sex" class="input_td" disabled="true"></td>
                        </tr>
                        <tr style="height: 60px">
                            <td>学号：</td><td><input :value="BreakUpArr.stu_id" class="input_td" disabled="true"></td>
                            <td>专业：</td><td><input :value="BreakUpArr.stu_major" class="input_td" disabled="true"></td>
                        </tr>
                        <tr style="height: 60px">
                            <td>二级学院：</td><td><input :value="BreakUpArr.stu_college" class="input_td" disabled="true"></td>
                            <td>违纪类型：</td><td>
                                <select name="bre_type" v-model="BreakUpArr.bre_type">
                                    <option value="考试作弊">考试作弊</option>
                                    <option value="违规电器">违规电器</option>
                                    <option value="宿舍违纪">宿舍违纪</option>
                                    <option value="打架斗殴">打架斗殴</option>
                                    <option value="教学管理违纪">教学管理违纪</option>
                                    <option value="其他">其他</option>
                                </select>
                            </td>
                        </tr>
                        <tr style="height: 60px">
                            <td>处分等级：</td>
                            <td>
                                <select name="bre_level" v-model="BreakUpArr.bre_level">
                                    <option value="警告">警告</option>
                                    <option value="严重警告">严重警告</option>
                                    <option value="记过">记过</option>
                                    <option value="留校察看">留校察看</option>
                                    <option value="开除学籍">开除学籍</option>
                                </select>
                            </td>
                            <td>处分文号：</td><td><input v-model="BreakUpArr.bre_type_name" name="bre_type_name" class="input_td"> </td>
                        </tr>
                        <tr style="height: 60px">
                            <td>处分时间：</td><td><input v-model="BreakUpArr.bre_time" name="bre_time" type="date" :max="date" v-on:input="onchange2"></td>
                            <td>到期时间：</td><td><input v-model="BreakUpArr.bre_relieve_time" name="bre_relieve_time" readonly="readonly" type="date" ></td>
                        </tr>
                        <tr style="height: 60px"><td>辅导员：</td><td colspan="3"><input :value="BreakUpArr.stu_instructor" class="input_td" disabled="true"></td></tr>
                        <tr style="height: 60px"><td>违纪事实：</td><td colspan="3"><input v-model="BreakUpArr.bre_detail" name="bre_detail" class="input_td"></td></tr>
                        <input v-model="BreakUpArr.bre_id" name="bre_id" style="display: none">
                    </table>
                    <div style="text-align: center;margin-top:20px;">
                        <button type="button" @click="submit2()"  style="margin-left: -10px;margin-top:5px;height:35px;width: 100px;border: none;background-color:#169BD5;color: white;border-radius: 4px 4px 4px 4px;font-size: 8px;">修改</button>
                        <button @click="CloseUpDataShow()" style="margin-left: 10px;margin-top:5px;height:35px;width: 100px;border: none;color: black;border-radius: 4px 4px 4px 4px;font-size: 8px;">关闭</button>
                    </div>
                </form>
            </div>
        </div>

        <div>
            <div class="left_table" style="width: 90%;float: left;">
                <div style="width: 100%;margin-left: 40px;margin-top: 40px;height: 50px;">
                    <div>
                        <input v-model="select[0]" placeholder="请输入学生姓名" style="width: 20%;height:30px;float: left;border-radius: 3px 3px 3px 3px;border-color: #e0e0e0;border-style:solid;border-width:1px;text-indent: 5px;">
                        <input v-model="select[1]" placeholder="请输入院系" style="width: 20%;height:30px;float: left;border-radius: 3px 3px 3px 3px;border-color: #e0e0e0;border-style:solid;border-width:1px;text-indent: 5px;margin-left: 10px">
                        <input v-model="select[2]" placeholder="请输入专业" style="width: 20%;height:30px;float: left;border-radius: 3px 3px 3px 3px;border-color: #e0e0e0;border-style:solid;border-width:1px;text-indent: 5px;margin-left: 10px">
                        <button @click="GetInfoSelect(select[0],select[1],select[2])" style="float: left;margin-left: 10px;height:30px;width: 50px;border: none;background-color: rgb(22,155,213);color: white;">查询</button>
                    </div>
                    <a href="/DownEx" ><button style="margin-left: 10px;height:30px;width: 90px;border: none;background-color: #00a7d0;color: white;border-radius: 4px 4px 4px 4px;font-size: 8px;">导出</button></a>
                </div>

                <!-- 听课记录表格 -->
                <table style="width: 90%; font-size: 16px;text-align: center;margin: 0 auto;border-collapse: separate;border-spacing: 0;border: 2px #e0e0e0;" id="tb1">
                    <div style="width: 30px">
                        <tr style="background: #efefef;font-size: 14px">
                            <td style="height: 50px;border-top-left-radius: 12px;">二级学院</td><td>年级</td><td>专业</td><td>学号</td>
                            <td>姓名</td><td>处分时间</td><td>处分期</td><td>违纪类型</td><td>处分等级</td>
                            <td>处分状态</td><td>处分解除时间</td><td>操作</td><td style="border-top-right-radius: 12px;">解除</td>
                        </tr>
                    </div>
                    <tr v-for="(rule,index) in arr" style="height: 60px;border-bottom: 2px solid #eaeaea;font-size: 13px;">
                        <td>{{rule.stu_college}}</td><td>{{rule.stu_grade}}</td>
                        <td>{{rule.stu_major}}</td><td>{{rule.stu_id}}</td>
                        <td>{{rule.stu_name}}</td><td>{{rule.bre_time}}</td>
                        <td style="color: #00a7d0">{{rule.bre_time}}~{{rule.bre_relieve_time}}</td><td>{{rule.bre_type}}</td>
                        <td>{{rule.bre_level}}</td><td :style="{color : zxc1(rule.bre_state)}">{{playbackFormat(rule.bre_state)}}</td>
                        <td>{{rule.bre_relieve_time}}</td>

                        <td>
                            <div>
                                <button @click="showBreakInfo(arr[index])"  style="background-color:transparent;border-style:none;color: #00a7d0;">详情</button>
                                <button @click="UpDataInfo(arr[index])" style="background-color:transparent;border-style:none;color: #00a7d0;" :style="{display : zxc2(rule.bre_state)}">编辑</button>
                                <button @click="DeleteBreak(rule.bre_id)"  style="background-color:transparent;border-style:none;color: red">移除</button>
                            </div>

                        </td>
                        <td>
                            <div :style="{display : zxc2(rule.bre_state)}" >
                                <button @click="UpBreak(rule.bre_id)" class="btn">解除处分</button>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <div>
                <button type="button" value="+新增违纪记录" class="post" @click="showLogInfoShow()" style="margin-left: -60px;margin-top:50px;height:35px;width: 120px;border: none;background-color: rgb(27,172,111);color: white;border-radius: 4px 4px 4px 4px;font-size: 8px;">+新增违纪处分记录</button>
            </div>
        </div>
    </div>

</div>
<script th:src="@{/layui/layui.js}"></script>

<script>
    layui.use('element', function() {
        var element = layui.element;
    });
    new Vue({
            el:"#app",
            data:{
                log:[1,1,1,1],
                arr:[],
                BreakInfoArr:[],
                input:[],
                selectStu:[{
                    stu_major:"请输入学号后校验！",
                    stu_sex:"请输入学号后校验！",
                    stu_college:"请输入学号后校验！",
                    stu_name:"请输入学号后校验！",
                }],
                OK:false,
                date:"",
                bre_relieve_time:"",
                BreakUpArr:[],
                showLogInfo:false,
                BreakInfo:false,
                showUpData:false,
                userId:[[${session.loginInfo.userId}]],
                isRed : [],
                select:[],
            },
            mounted(){
                this.GetInfo();
                this.GetDate();
            },
            methods:{
                //获取听课记录
                GetInfo:function () {
                    var that = this;
                    axios.get("http://localhost:8443/BreakRuleList").then(function (response) {
                        console.log(response.data);
                        that.arr = response.data;
                    },function (err) {
                        console.log(err);
                    })
                },
                GetDate:function () {
                    var date = new Date();
                    var year = date.getFullYear();
                    var month = ('0'+ (date.getMonth() + 1)).slice(-2);
                    var day = ('0' + date.getDate()).slice(-2);

                    this.date= year +'-'+ month +'-'+ day;
                },
                //获取听课记录
                getStuBreakList:function (stu_id,stu_name,stu_college,stu_major) {
                    var that = this;
                    let params = new URLSearchParams();
                    params.append('stu_id', stu_id);
                    params.append('stu_name', stu_name?stu_name:"");
                    params.append('stu_college', stu_college?stu_college:"");
                    params.append('stu_major', stu_major?stu_major:"");
                    axios.post("http://localhost:8443/getStuBreakList",params).then(function (response) {
                        console.log(response.data);
                        that.arr = response.data;
                    },function (err) {
                        console.log(err);
                    })
                },

                //删除违纪记录
                DeleteBreak:function (Break_id) {
                    if(!confirm("确定操作所选记录吗?")) return;
                    var that = this;
                    axios.get("http://localhost:8443/Break_delete/"+Break_id).then(function (response) {
                        console.log(response.data);
                        that.GetInfo();
                    },function (err) {
                        console.log(err);
                    })
                },
                //------

                //全局遮罩------
                showLogInfoShow:function () {
                    this.showLogInfo = true;
                },

                CloseShow:function () {
                    this.input.length = 0;
                    this.ResetStu();
                    this.showLogInfo = false;
                },
                //------

                //courseInfo
                showBreakInfo:function(arr){
                    this.BreakInfo=true;
                    this.BreakInfoArr=arr;
                },

                CloseInfoShow:function () {
                    this.BreakInfo=false;
                },

                //修改信息
                UpDataInfo:function(arr){
                    this.showUpData=true;
                    this.BreakUpArr=arr;
                },
                CloseUpDataShow:function () {
                    this.BreakUpArr.length=0;
                    this.showUpData=false;
                },

                SelectStu:function(stu_id){
                    if (stu_id !=null){
                        var that = this;
                        axios.get("http://localhost:8443/select_stu/"+stu_id).then(function (response) {
                            console.log(response.data);
                            if(response.data.length!=0){
                                that.selectStu = response.data;
                                that.OK = true;
                                alert("校验成功！");
                            }else{
                                that.ResetStu();
                                alert("无该学生！重新输入");
                            }
                        },function (err) {
                            console.log(err);
                            alert("无该学生！重新输入");
                        })
                    }else{
                        alert("请输入学号查询！");
                    }
                },
                ResetStu:function () {
                    this.selectStu.length=0;
                    this.selectStu[0]= {
                        stu_major:"请输入学号后校验！",
                        stu_sex:"请输入学号后校验！",
                        stu_college:"请输入学号后校验！",
                        stu_name:"请输入学号后校验！",
                    };
                    this.bre_relieve_time="";
                },
                submit:function () {
                    if(this.OK == false) {
                        alert("请输入有效学号后校验!");
                    }else{
                        var addForm = document.getElementById("addForm");
                        if(addForm.bre_time.value !== "" && addForm.bre_detail.value !=="" && addForm.bre_type_name.value !==""){
                            if(!confirm("确定操作所选记录吗?")) return;
                            addForm.submit();
                        }else {
                            alert("输入完整信息！");
                        }
                    }
                },
                submit2:function () {
                    var breakRule_update = document.getElementById("breakRule_update");

                    console.log(breakRule_update.bre_detail.value);
                    if (breakRule_update.bre_time !=="" && breakRule_update.bre_detail.value !=="" && breakRule_update.bre_type_name.value !== "") {
                        if(!confirm("确定操作所选记录吗?")) return;
                        breakRule_update.submit();
                    } else {
                        alert("输入完整信息！");
                    }
                },
                onchange:function () {
                    var addForm = document.getElementById("addForm");
                    if (addForm.bre_time == null)
                        return;
                    this.bre_relieve_time =  parseInt(addForm.bre_time.value.substring(0,4))+1+addForm.bre_time.value.substring(4) ;
                },
                onchange2:function () {
                    var breakRule_update = document.getElementById("breakRule_update");
                    if (breakRule_update.bre_time == null)
                        return;
                    this.BreakUpArr.bre_relieve_time =  parseInt(breakRule_update.bre_time.value.substring(0,4))+1+breakRule_update.bre_time.value.substring(4) ;
                },
                //解除处分
                UpBreak:function (Break_id) {
                    if(!confirm("确定操作所选记录吗?")) return;
                    var that = this;
                    axios.get("http://localhost:8443/Break_Up/"+Break_id).then(function (response) {
                        console.log(response.data);
                        that.GetInfo();
                    },function (err) {
                        console.log(err);
                    })
                },
                GetInfoSelect:function (stu_name,stu_college,stu_major) {
                    var that = this;
                    let params = new URLSearchParams();
                    params.append('stu_name', stu_name?stu_name:"");
                    params.append('stu_college', stu_college?stu_college:"");
                    params.append('stu_major', stu_major?stu_major:"");
                    axios.post("http://localhost:8443/select_stu",params).then(function (response) {
                        console.log(response.data);
                        that.arr = response.data;
                    },function (err) {
                        console.log(err);
                    })
                },

                playbackFormat:function(row,index) {
                    if (row === 0) {
                        return '处分中'
                    } else  {
                        return '处分到期'
                    }
                },
                zxc1:function (num) {
                    if(num === 0){
                        return "red";
                    }else{
                        return "#a1a6aB";
                    }
                },
                zxc2:function (num) {
                    if(num === 1){
                        return "none";
                    }
                },

            }
        }
    )
</script>
</body>
</html>